<template>
    <div class="classlist">
        <van-nav-bar fixed title="菜谱分类" @click-right="linktoSearch">
            <template #right>
                <van-icon name="search" size="20" />
            </template>
        </van-nav-bar>
        <div class="type-list">
            <van-sidebar v-model="active" @change="changeType(active)">
                <van-sidebar-item v-for="(item, index) in csData" :key="index" :title="item.name" />
            </van-sidebar>
            <div class="list-content">
                <div class="list-item" v-for="(item, index) in csListData" :key="index">
                    <div class="img-box">
                        <img :src="item.image_url" @click="searchRecipes(item.name)">
                    </div>
                    <div class="dish-name" :class="{ active: activeIndex === index }">
                        <ul>
                            <li v-for="(item, i) in csListData[index].cs" :key="i" @click="searchRecipes(item.name)">{{
                                item.name }}</li>
                        </ul>
                        <div class="more" v-if="csListData[index].cs.length > 9" @click="clickMore(index)">
                            {{ activeIndex === index ? "收起" : "更多" }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getFlatcatalogs } from '@/api/api';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute} from 'vue-router';
let active: any = ref<number>(0)
let csData: any = ref<Array<any>>([])
let csListData: any = ref<Array<any>>([])
let activeIndex: any = ref<number>(-1)
let route: any = useRoute()
let sHistoryData: any = ref<any>("")
//切换不同菜谱类型
let changeType: (index: number) => void = (index: number): void => {
    csListData.value = csData.value[index].cs
}
//加载更多
let clickMore: (index: number) => void = (index: number): void => {
    if (activeIndex.value === index) {
        activeIndex.value = -1
        return;
    }
    activeIndex.value = index
}
let router: any = useRouter()
//跳转到搜索页面
let linktoSearch: () => void = (): void => {
    router.push({path:"/search",query:{path:route.fullPath}})
}
//搜索相关菜谱信息
let searchRecipes: (keyword: string) => void = (keyword: string): void => {
    let path: string = "/recipes"
    router.push({
        path, query: {
            kw: keyword,
            path: route.fullPath
        }
    })
    //本地存储搜索历史记录
    sHistoryData.value = localStorage.getItem("sHistoryData")
    if (sHistoryData.value) {
        sHistoryData.value = JSON.parse(sHistoryData.value)
    } else {
        sHistoryData.value = []
    }
    if (sHistoryData.value.length >= 8) {
        sHistoryData.value.pop()
    }
    //判断搜索记录是否相同,同则return,否则push
    for (let i: number = 0; i < sHistoryData.value.length; i++) {
        if (sHistoryData.value[i] == keyword) {
            return;
        }
    }
    sHistoryData.value.unshift(keyword)
    localStorage.setItem("sHistoryData", JSON.stringify(sHistoryData.value))
}
onMounted((): void => {
    //获取菜谱分类数据
    getFlatcatalogs().then((res: any) => {
        console.log(res)
        csData.value = res.data.result.cs
        csListData.value = csData.value[0].cs
    }).catch((err: any) => {
        console.log(err)
    })
})

</script>

<style scoped lang="scss">
.classlist {

    ::v-deep .van-nav-bar .van-icon{
        color: #333;
    }
    ::v-deep .van-nav-bar__title {
        font-size: 18px;
    }

    ::v-deep .van-sidebar-item--select::after {
        position: absolute;
        top: 50%;
        right: 0;
        height: 25px;
        width: 3px;
        background-color: #f9c653;
        transform: translateY(-50%);
        content: "";
    }

    ::v-deep .van-sidebar-item--select::before {
        width: 0;
    }

    .type-list {
        display: flex;
        padding-top: 46px;

        ::v-deep .van-sidebar {
            height: 100vh;
        }

        .list-content {
            padding: 10px;
            box-sizing: border-box;
            position: fixed;
            right: 0;
            width: 80%;
            height: 100vh;
            overflow-y: auto;
            padding-bottom: 46px;

            .list-item {
                .img-box {
                    width: 100%;

                    img {
                        width: 100%;
                    }
                }
            }

            .dish-name {
                position: relative;
                height: 135px;
                overflow: hidden;

                &.active {
                    height: auto;
                }

                ul {
                    display: flex;
                    margin-top: 10px;
                    flex-wrap: wrap;

                    li {
                        width: 31.5%;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        border: 1px solid #f1f1f1;
                        border-radius: 4px;
                        color: #333;
                        margin-right: 5px;
                        margin-bottom: 10px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;

                        &:nth-child(3n) {
                            margin-right: 0;
                        }
                    }

                }

                .more {
                    width: 86px;
                    height: 30px;
                    border: 1px solid #f1f1f1;
                    text-align: center;
                    line-height: 30px;
                    position: absolute;
                    bottom: 10px;
                    right: 2px;
                    background: #fff;
                }

            }
        }
    }
}</style>